import { FormEvent } from 'react';
import { useAuthStore } from '../../stores';

import { Button, Form, Input,Image  } from 'antd';
import { login } from '@/api1/login/login'
import { useNavigate } from 'react-router-dom';

type FieldType = {
  username?: string;
  password?: string;

};

export const LoginPage = () => {

  const navigate = useNavigate();
  
  const onFinish = (values: any) => {

  loginUser(values.username, values.password, navigate);

    //navigate('/dashboard/dashboards');
     return
    login({
      userName: values.username,
      passWord: values.password,
    }).then((e: any) => {
      console.log(e, 'tttttttttt');

    
      navigate('/dashboard');
    })
    console.log('Success000:', values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const loginUser = useAuthStore((state) => state.loginUser);

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // const { username, password, remember } = event.target as HTMLFormElement;
    const { username, password, remember } = event.target as typeof event.target & {
      username: { value: string };

      password: { value: string };
      remember: { checked: boolean }
    };
    console.log(username.value, password.value, remember.checked);

   // loginUser(username.value, password.value);

    // username.value = '';
    // password.value = '';
    // remember.checked = false;
  }


  return (
    <>
      <div className="flex items-center justify-center h-screen" >

     

        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="账号"
            name="username"
            rules={[{ required: true, message: '请输入账号' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>

      </div>

      {/* <div className="mt-6 text-blue-500 text-center">
        <a href="#" className="hover:underline">Sign up Here</a>
      </div> */}
    </>
  );
};